import { computed } from 'vue';

import { IconifyIcon as Icon } from '@vben/icons';
import { $t } from '@vben/locales';

import { ElTag } from 'element-plus';

import { type MenuItem, MenuTypeMap } from './type';

export const tablecolumns = computed(() => [
  {
    title: $t('sys.menu.menuName'),
    field: 'name',
    treeNode: true,
    Width: 120,
    formatter: ({ cellValue }: any) => $t(`sys.menu.${cellValue}`), // 国际化
  },
  // 类型
  {
    title: $t('sys.menu.type'),
    field: 'menuType',
    minWidth: 119,
    formatter: ({ cellValue }: any) =>
      MenuTypeMap[cellValue as keyof typeof MenuTypeMap],
  },
  {
    title: $t('sys.menu.icon'),
    field: 'type',
    align: 'center',
    width: 100,
    slots: {
      default: (data: any) => {
        return (
          <div class="flex items-center justify-center">
            <Icon icon={data.row.icon} />
          </div>
        );
      },
    },
  },
  {
    title: $t('sys.menu.serviceName'),
    field: 'serviceName',
    minWidth: 120,
  },
  {
    title: $t('sys.menu.routePath'),
    field: 'path',
    minWidth: 120,
  },
  {
    title: $t('sys.menu.order'),
    field: 'sort',
    minWidth: 120,
  },
  // 状态
  {
    title: $t('sys.menu.status'),
    field: 'status',
    minWidth: 120,
    slots: {
      default: ({ row }: { row: MenuItem }) => {
        return (
          <ElTag type={row.status ? 'success' : 'info'}>
            {row.status ? $t('sys.menu.on') : $t('sys.menu.off')}
          </ElTag>
        );
      },
    },
  },
  // 隐藏
  {
    title: $t('sys.menu.isHidden'),
    field: 'hideMenu',
    minWidth: 120,
    slots: {
      default: ({ row }: { row: MenuItem }) => {
        return (
          <ElTag type={row.hideMenu ? 'info' : 'success'}>
            {row.hideMenu ? $t('sys.menu.isHidden') : $t('sys.menu.isShown')}
          </ElTag>
        );
      },
    },
  },
  // 创建时间
  {
    title: $t('sys.menu.createTime'),
    field: 'createdAt',
    minWidth: 120,
    formatter: ['formatDate', 'yyyy-MM-dd'],
  },

  {
    title: $t('sys.menu.operation'),
    minWidth: 200,
    slots: { default: 'action' },
  },
]);
